UX Properties
Description
UX properties include:
- Name
- Description
- Layout type
Specify the way in which the HTML is generated
- Control flow direction
Specify if the controls on the UX flow from left-to-right or right-to-left (select rtl for Hebrew and Arabic)
- Class map
Specify how the abstract CSS class names used in this component map to physical CSS class names in your style sheets.
- Resolve abstract CSS class names
Replace abstract CSS class names with physical CSS class names. This should only be un-checked if you are in development mode and you want to determine what abstract CSS class name is for a particular element in the component.
- Style name
Click the button to select a new style, or edit the existing style. You can also use <ProjectStyle> or <Session:varname>
- Customize style colors and fonts
Customize the style colors and fonts. This provides a simpler way to customize a web theme's colors for the entire project.
- Color palette
Defines the color palette to use for the UX Component. Applies only to this UX Component -- does not affect other components.
- Use compact theme
If supported by the theme, enables 'compact' view. The 'compact' view is often used in desktop browser applications.
- Edit style in Style Builder
Allows you to create your own styles using a copy of an existing system style.
- Font Size
Specifies if the fonts in the UX Component should be scaled to make them larger or smaller. Doing this will also scale the size of many controls in the component. Select 'Medium' for no scaling, i.e. the fonts shown will match those defined in the style sheet.
- Local sub-theme definitions - Javascript
Define the Javascript for any locally defined sub-themes. Sub-themes are used to create custom appearance of certain control types such as windows, buttons, tabs, accordions, sliders. switches, etc.
- Local sub-theme definitions - CSS
Define the CSS for any locally defined sub-themes. Sub-themes are used to create a custom appearance for certain types such as windows, buttons, tabs, accordions, sliders, switches, etc.
- Control Behavior Overrides
This property is used with mobile devices.
- Label width
If a control's label is set to display to the left or right of the control, specify the default width of the label. Use CSS syntax, e.g. '3in'. All controls that have their label width set to '{Global.LabelWidth}' will inherit this value.
- Center component on page
Specify if the component should be centered horizontally on the page. Does not apply if the component uses Panels).
- Use drag scrolling
Specify when drag scrolling should be used. 'Auto' - use drag scrolling when the device support touch. 'Never', never use drag scrolling for use on devices that support both mouse and touch. 'Always', always use drag scrolling even on non-touch devices, where a mouse can be used to initiate the drag event.
- Page title
Specify the page title for the .a5w page that renders this component.
- Font scaling option
Specify which CSS classes should be scaled. If you choose 'All', then the fonts in these classes will be scaled in addition to the fonts in the CSS classes specific to the Style that you selected: BODY, TABLE, TH, TR, TD, UL, OL, LI, P, A, BLOCKQUOTE.
- Style sub-theme and CSS 'tweaks'
Define style tweaks, sub-theme, or CSS to augment or override definitions in the web theme.